<template>
  <div>
    <!-- 数据表格 -->
    <div :class="minHeight == true ? 'minheight' : ''" ref="tableCardHeight">
      <Card class="tableCard">
        <Table :columns="qualityColumns" :data="qualityData" size="small">
          <template slot-scope="{ row }" slot="score">
            <span style="color: #2d8cf0">{{ row.score }}</span>
          </template>
          <template slot-scope="{ row }" slot="agentcode">
            <span>{{ row.agentcode }} - {{ row.agentname }}</span>
          </template>
          <template slot-scope="{ row }" slot="planstatename">
            <span>{{ row.reagentcode }} - {{ row.reagentname }}</span>
          </template>
          <template slot-scope="{ row }" slot="workrecord">
            <span style="color: #2d8cf0"
              ><Button type="primary" @click="checkWorkRecord(row)">{{
                row.visitstate
              }}</Button></span
            >
          </template>
        </Table>
        <!-- 分页 -->
        <Row>
          <i-col
            span="24"
            style="text-align: right; margin-top: 20px; margin-bottom: 40px"
          >
            <Page
              :total="total"
              show-total
              show-sizer
              :current="pageIndex"
              :page-size="pageSize"
              @on-change="pageChange"
              @on-page-size-change="pageSizeChange"
              :page-size-opts="pageSizeOptions"
            />
          </i-col>
        </Row>
      </Card>
    </div>
    <Button type="primary" @click="info" v-if="false"></Button>
    <div class="contain" ref="mybox" v-show="false">
      <canvas
        id="myCanvas"
        width="200"
        height="100"
        ref="myCanvas"
        style="position: absolute"
      ></canvas>
    </div>
  </div>
</template>

<script>
import util from "../../../util/util";
import { drawSign } from "../../../util/drawSign";
export default {
  data() {
    return {
      relaType: "",
      // 表格数据
      qualityColumns: [
        // {
        //   type: "selection",
        //   align: "center",
        //   fixed: "left",
        //   width: 60
        // },
        {
          title: "分单类型",
          key: "rnewtype",
          width: "100",
          fixed: "left",
          filters: [
            {
              label: "督导件",
              value: "0",
            },
            {
              label: "收费件",
              value: "1",
            },
            {
              label: "失效件",
              value: "2",
            },
            {
              label: "交办件",
              value: "3",
            },
            {
              label: "关爱件",
              value: "4",
            },
          ],
          filterMultiple: false,
          filterRemote: (value, row) => {
            this.relaType = value[0];
            if (value === "0") {
              return row.rnewtype === "督导件";
            } else if (value === "1") {
              return row.rnewtype === "收费件";
            } else if (value === "2") {
              return row.rnewtype === "失效件";
            } else if (value === "3") {
              return row.rnewtype === "交办件";
            } else if (value === "4") {
              return row.rnewtype === "关爱件";
            }
            this.submitForm();
          },
        },
        {
          title: "保单号",
          key: "contno",
          width: "180",
          fixed: "left",
        },
        {
          title: "投保人",
          key: "appntname",
          align: "center",
          width: "130",
        },
        // {
        //   title: "保单生效日",
        //   key: "paytodate",
        //   align: "center",
        //   width: "130",
        //   render: (h, params) => {
        //     return h('span',
        //       //  params.row.plantype == '4' ?
        //        params.row.paytodate.slice(0,10)
        //       //  :'-'
        //     );
        //   }
        // },
        {
          title: "应交日",
          key: "paytodate",
          align: "center",
          width: "130",
          // sortable: true,
          // sortable: "custom"
          render: (h, params) => {
            return h(
              "span",
              //  params.row.plantype != '4' ?
              params.row.paytodate.slice(0, 10)
              // :'-'
            );
          },
        },
        {
          title: "交次",
          key: "paycount",
          align: "center",
          width: "110",
        },
        // {
        //   title: "交费难度",
        //   key: "difficulty",
        //   align: "center",
        //   width: "120",
        //   render: (h, params) => {
        //     return h('span',
        //       params.row.plantype && (params.row.plantype == '4')?'-':params.row.difficulty
        //     );
        //   }
        // },
        {
          title: "保费(元)",
          key: "prem",
          align: "center",
          width: "140",
          // sortable: true,
          // sortable: "custom"
        },
        // {
        //   title: "宽限期剩余天数",
        //   key: "restdays",
        //   align: "center",
        //   width: "150",
        //   render: (h, params) => {
        //     return h('span',
        //       params.row.plantype && (params.row.plantype == '4')?'-':params.row.restdays
        //     );
        //   }
        // },
        {
          title: "完成时间",
          key: "finishdate",
          align: "center",
          minWidth: 130,
        },
        // {
        //   title: "计划工作方式",
        //   key: "worktypename",
        //   align: "center",
        //   minWidth: 140
        // },
        {
          title: "业务员",
          key: "agentcode",
          align: "center",
          width: "170",
          slot: "agentcode",
          fixed: "right",
        },
        {
          title: "续期专员",
          key: "planstatename",
          align: "center",
          width: "170",
          slot: "planstatename",
          fixed: "right",
        },
        {
          title: "回访登记",
          key: "workrecord",
          align: "center",
          width: "110",
          slot: "workrecord",
          fixed: "right",
        },
      ],
      qualityData: [],
      // 分页数据
      total: 0,
      pageIndex: 1,
      pageSize: 10,
      pageSizeOptions: [5, 10, 15, 20],
      // 调整card高度
      minHeight: false,
      dateOptions: {
        disabledDate(date) {
          return (
            date &&
            (date.valueOf() > Date.now() ||
              date.valueOf() < Date.parse("2019-04"))
          );
        },
      },
      queryState: false,
      queryLoading: false,
    };
  },
  methods: {
    info(tip) {
      this.$Message.info(tip);
    },
    //跳转
    checkWorkRecord(row) {
      console.log(row, "row");
      // let obj = {
      //     planid:row.planid,
      //     contno:row.contno
      // }
      // console.log(row,'rowrowroworwrowrowrow')
      // return
      // sessionStorage.removeItem('flag');
      if (row.visitstate == "未回访" || row.visitstate == "回访中") {
        this.$router.push({
          name: "workRecordReturnvisit",
          query: {
            reagentCode: row.reagentcode,
            planid: row.planid,
            contno: row.contno,
            row: this.$route.query.row,
            type: this.$route.query.type,
            paytodate: row.paytodate,
            visitid: row.visitid,
            finishdate: row.finishdate,
            // sign:
          },
        });
        return;
      }
      this.$router.push({
        name: "workService",
        query: {
          reagentCode: row.reagentcode,
          planid: row.planid,
          contno: row.contno,
          row: this.$route.query.row,
          type: this.$route.query.type,
          paytodate: row.paytodate,
          visitid: row.visitid,
          finishdate: row.finishdate,
        },
      });
    },
    // 查询
    submitForm() {
      //   this.$refs.qualityForm.validate(valid => {
      //     if (valid) {
      //   this.queryLoading = true;
      let obj = {
        reagentcode: this.$route.query.reagentCode,
        index: this.pageIndex,
        pageSize: this.pageSize,
        workday: this.$route.query.appointeddate,
        // workday: '2020-04-02',
        rnewtype: this.relaType || "",
      };
      //console.log(obj)
      this.total = 0;
      this.qualityData = [];
      this.api.queryRenewList(obj).then((res) => {
        //console.log(res.data)
        if (res.code == 200 && res.data != null) {
          console.log(res, "resres");
          this.qualityData = res.data;
          this.total = res.data.length;
          this.queryState = true;
          this.queryLoading = false;
          //console.log(this.qualityData);
          this.$Message.info(res.msg);
        } else {
          this.total = 0;
          this.qualityData = [];
          this.queryLoading = false;
          this.$Message.info(res.msg);
        }
      });
      //     }
      //   });
    },
    // 分页设置
    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.submitForm();
    },
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.submitForm();
    },
    // 合并行
    handleSpan({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0 && (columnIndex === 0 || columnIndex === 1)) {
        return {
          rowspan: 2,
          colspan: 1,
        };
      }
      if (rowIndex % 2 === 1 && (columnIndex === 0 || columnIndex === 1)) {
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
    },
    adjustHeight() {
      if (this.$refs.tableCardHeight.scrollHeight < 460) {
        this.minHeight = true;
      }
    },
    // draw(ele,loginUser,loginTime) {
    //   let imageUrl = drawSign(ele,loginUser,loginTime)
    //   document.getElementsByClassName("ivu-table-fixed-body")[0].style.background = 'url(' + imageUrl + ') left top repeat'
    //   document.getElementsByClassName("ivu-table-fixed-body")[0].classList.add("add-background")
    //   document.getElementsByClassName("ivu-table-fixed-body")[1].style.background = 'url(' + imageUrl + ') left top repeat'
    //   document.getElementsByClassName("ivu-table-fixed-body")[1].classList.add("add-background")
    //   document.getElementsByClassName("ivu-table-body")[0].style.background = 'url(' + imageUrl + ') left top repeat'
    //   document.getElementsByClassName("ivu-table-body")[0].classList.add("add-background")
    // },
  },
  mounted() {
    this.adjustHeight();
    this.submitForm();
    // let loginUser = sessionStorage.getItem("name");
    // let loginTime =
    // new Date().getFullYear() +
    // "/" +
    // (new Date().getMonth() + 1) +
    // "/" +
    // (new Date().getDate());
    // this.draw(this.$refs.myCanvas,loginUser,loginTime)
  },
  activated() {
    if (window.sessionStorage.getItem("flag")) {
      this.pageIndex = 1;
      this.submitForm();
      console.log("进来");
    } else {
      console.log("没来");
    }
  },
};
</script>
<style lang="less">
@import "./index";
.ivu-icon-ios-close:before {
  color: #000 !important;
}
.add-background td {
  background-color: rgba(255, 255, 255, 0) !important;
  background: rgba(255, 255, 255, 0) !important;
}
</style>
